<template>
	<div class="common-layout">
		<el-container>
			<el-header
				><el-row :gutter="20" height="80px">
					<el-col :span="4">
						<img class="logo" src="../assets/logo.png" />
					</el-col>
					<el-col :span="16"><h2>后台管理系统</h2></el-col>
					<el-col :span="4"
						><el-button class="logout" link @click="logout"
							>退出登录</el-button
						></el-col
					>
				</el-row></el-header
			>
			<el-container>
				<el-aside width="200px"
					><el-menu
						active-text-color="#ffd04b"
						background-color="#545c64"
						class="el-menu-vertical-demo"
						:default-active="active"
						text-color="#fff"
						router
					>
						<!-- router 属性表示 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 -->
						<el-menu-item
							v-for="item in list"
							:key="item.path"
							:index="item.path"
						>
							<span>{{ item.meta.title }}</span>
						</el-menu-item>
					</el-menu></el-aside
				>
				<el-main><RouterView></RouterView></el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
	name: 'HomeView',
	setup() {
		const router = useRouter()
		// router.getRoutes() 可以拿到所有的路由信息
		const list = router.getRoutes().filter((item) => item.meta.isShow)

		const route = useRoute()
		const logout = () => {
			localStorage.removeItem('token')
			router.push('/login')
		}
		return { list, active: route.path, logout }
	},
	components: {},
})
</script>

<style scoped lang="scss">
.el-header {
	height: 80px;
	background-color: #666;
	.logo {
		width: 80px;
	}

	h2,
	.logout {
		text-align: center;
		height: 80px;
		line-height: 80px;
		color: #eee;
	}
}
.el-aside {
	height: calc(100vh - 80px);
	background-color: #545c64;
}
.el-main {
	height: calc(100vh - 80px);
}
</style>
